Introducing Stratos — production-ready Styled Components directly from inside Sketch ? ? ✅

Hey guys, Juan from Team Sketch2React here ??

We’re super proud to announce the next version of Sketch2React called Stratos to the world with this very article. Doing it here, the very same place where we first introduced Sketch2React, feels amazing.❤️

Important info ? ?

Many people have contacted us regarding Stratos and that is awesome. A bit of clarification on our part is needed:

Stratos Apps are being distributed to all of our Patreons & Gumroadians 100% free (people who has bought or will buy our pre-releases via Gumroad that is)
Stratos Beta Program is out now — it includes two apps, Stratos Components & Stratos Tokens
The Alpha & Beta releases will all be time-stamped, meaning they will work for x time, then stop functioning
When we release v1 of Stratos you will be required to purchase a license

A bit of history

Almost two years ago me and Fredrik embarked on this journey with a very simple yet complex question: why do we work like we do between design & code? We wanted to be able to do more and we were not satisfied with the way handoff tools worked. So we started creating something that ended up being Sketch2React.

We released the very first public version of Sketch2React in May 2018. You couldn’t do much with it then and the code generated frankly was a bit messy. But it gain us some attention (thanks guys ??❤️).

Fast forward to the present. Stratos is not just a big evolutionary step for us as a team, but also for all designers & developers out there that want to do more, work smarter and get more stuff done faster and more efficient. Isn’t that like everyone? Should be.

How is this different from v1 of Sketch2React?

Good question. Don’t get us wrong, we think v1 in it’s current iteration (v1.6.7) is awesome, we’ve added tons and tons of great features over the last 20 months.

But in V1+ you’re limited to exporting as either a React website project (Vanilla React, Create React App) or as a HTML5 web project.

Fine things but why stop there? We have taken this core philosophy of more to the next level with Stratos. If you’re wondering why we have changed the name you can read more about it here.

The why

First a little history for understanding all the new things we added.

Not made up scenario

Do your already overworked developers keep on prioritising down your ”petty design fixes” ??
Do you feel that you could do more for your team with the proper tooling?
Do you keep hearing things like “We’ll do this later”?

We totally understand all of these situations because this is how real design and development sometimes works in our day to day jobs.

We want to erase later from existence with Stratos. That’s no small task but hey what we do is insanely challenging already as it is, so why stop?

Here’s us trying to explain how Stratos works (click on it to enlarge) ?

What can I do in Stratos that’s so awesome then?

First and foremost the biggest difference is that we have re-written our rendering engine from scratch so it now renders Styled Components. ? ?

We also gave our core engine a fine name, Tropos Engine. See a pattern here in the naming of things? ?

Styled Components?

What the heck is a Styled Component you may be thinking right now. We’ll let the great Flavio Copes explain:

Styled Components allow you to write plain CSS in your components without worrying about class name collisions.

Styled Components aren’t even exclusive for React, the same team that built and maintains the library also created one for Vue.js! How awesome is that!? ?

In other words, it kicks *ss.

Very useful for designers that already are used to thinking in terms of reusable components (symbols in Sketch for example). You also want your code components to be reusable right? That’s the brilliant thing about React, everything is a component. Yup.

Let’s dissect how easy it is to create one of the most used Styled Components straight from Sketch, the good old H1.

How do I create a Styled Component then?

This is how you create a Styled Component in Sketch with Stratos.

In Sketch

Create a new blank Sketch file (⌘N)
Rename Page 1 → Start here
Create a new blank artboard (A) and call it Start (any size works)
Create a text node (T) and write something more creative than the default generated text ? ?
Go to the Sidebar in Sketch (formerly known as Layer List) and add this markup to the text layer:

{h1}

Style it, make it big — and your done ✅ That wasn’t hard!

Your document will look something like this…

Now let’s fire up Stratos and get comfortable.

This is the new Stratos Start Screen ?? — Alpha Footage

All the new things in Stratos

A new Start Screen where you create new projects and load already created ones.
We now have our own project file format, its called .stratosproject. This is due to the fact that you no longer only create things inside of your design application but also inside our code app (custom components for example).
You can either open up an already created project or create a new one from scratch. Let’s do that ?

How to create a new project in Stratos

First of all, give your Stratos project file a name, please don’t use strange characters, stick to English and you’ll be fine
Click on Select Project Folder, create a new folder on your computer machine and select it. What happens in the background is that we auto-create all necessary start files once you come to the step where you hit the Create New Project button. But don’t do that yet ? ?
Next Select Design File. Now you have two choices, either you select an already created blank design file (Sketch at the moment, later also Figma) or you create one in Sketch and save it to the same newly created folder from step 2. We recommend having all your design file in the same place as your project, makes it much more easier organising your projects this way. Also, you could for example send the entire folder later to someone else thus making this a self-contained Stratos project folder. Very neat.
You’re now ready to hit that sweet looking Create New Project button. Doooo it ✅

All those auto created sweet thangs yessss…

What happens now is that Stratos opens up your Sketch file and the first view you see is what we call the Design File View. This is how ours look:

Design File View in Stratos — Alpha Footage

Let’s press the Code View icon and see how the pure .sketch file code looks like:

Awesome ??

So let’s dive deeper into Stratos and look around a bit more, how this H1 looks and what we can do with it. Jumping down to the color palette icon you find something that we call the Component Inspector.

Let’s study the code from the H1:

Styled Component

export default styled.h1`
&& {
  letter-spacing:normal;
  text-align:default;
  line-height:inherit;
  color:rgba(10,5,74,1);
  font-family:WorkSans-Bold, 'Work Sans', sans-serif;
  font-size:30px;
  font-weight:700;
  mix-blend-mode:normal
}`;

CSS-Variable

const H1Style = {
  "letter-spacing": "normal",
  "text-align": "default",
  "line-height": "inherit",
  "color": "rgba(10,5,74,1)",
  "font-family": "WorkSans-Bold, 'Work Sans', sans-serif",
  "font-size": "30px",
  "font-weight": 700,
  "mix-blend-mode": "normal"
}

React-Snippet

<h1 style={H1Style} >{props.children}</h1>

Without even being a developer you as a designer should by now realise the utter strength and revolution about what you’re experiencing right now. This is a live Sketch file, it took you seconds and you are staring at a beautiful {h1} Styled Component ? ✅

The Explorer

The Explorer is a mighty mighty beast. ? You get to it by clicking on that icon that resembles a paper-thingie. One very convenient feature is the Artboard navigator. Never more will you need to link artboards together to view them, just navigate to them here. Boom ?

Oh we love you mighty Explorer — Alpha Footage

Here’s what you also what can do in the Explorer:

Create Custom React Components
View your Stratos Components (the ones that comes from Sketch)
A tree view of your entire code structure

Btw, this is how this very same project looks inside of Visual Studio Code (you can use whatever editor you want of course):

You can live edit all the rendered code & add your own custom components directly from your preferred code editor

Prefer adding your own custom code directly inside your prefered editor? Dooooo it. ? ?

Exporting to code

So say that you’re ready to share your awesome components with your developers, what’s next?

We now support exporting all of your Styled Components as a NPM project, how awesome is that? It means you can use for example NPM.js for uploading and sharing your code components with your team or the world.

Or maybe you also want to use something like Storybook to manage & maintain your components? Easy peasy, we’ll do a proper tutorial on all these things in the coming months.

So you see now why and how we just erased later.

Will this tool give you more responsibility?

Yes it will. With great powers comes great responsibility Spiderman says. So true. We’re creating a totally new layer between design and code that has not been possible before. Are we alone? Of course not. One thing though, we have some things that separates us from all other competitors:

This is not a plugin for Sketch and it will not be a plugin for Figma either. We use the strength of these excellent design tools and add more. On the side. That keeps us from building over-complicated plugins that can break really easy when the design tools make huge changes in the backend of things.
We do not import the design file, it’s linked. It’s a living breathing organism that you attach to Stratos. We see multiple benefits for this approach. You always have your design files intact, you can share them via Sketch Shared Libraries (and later Figmas Component Sharing).
Need to update your linked design file? No worries, just update, save the document and it auto-reloads inside Stratos.
We don’t own anything, nothing is stored in a cloud service. Everything is safe in your local design and development environment, you decide were, when and what you share.

Will Stratos be free?

Nope. V1 of Stratos will require a paid license, how much and how it will work will be revealed upon release. Up until then we will share the Beta with the same fine folks that always support us economically (see above).

Upon release of Stratos V1 all subscribers of our newsletter (plus all above supporters) will be given a great discount on the very first paid license.

That’s it hope you enjoyed this preview of Stratos and we hope your excited ? We know we are ? ✅ ?

Our very first Stratos Tutorial is out

https://medium.com/sketch2react/how-to-create-custom-react-components-in-stratos-8d8f6d0fdf2b

How to do real-time component development with Sketch, Stratos & Storybook